<template>
  <NavBar  :color="'#ffffff'" top='75rpx' :size="26">
  <view class="vip-container">
 
    <!-- 导航栏 -->
 <!--   <view class="nav-bar">
      <view class="back-button" @tap="goBack">
        <text class="back-icon">‹</text>
      </view>
    </view> -->
    
    <!-- 主背景内容 -->
    <view class="main-content">
      <!-- SVIP标题 -->
      <view class="svip-title-section">
        <image class="svip-title-section-image" src="/static/svip1.png" mode=""></image>
      </view>
      
	  
	 <view class="vip-content">
		  <!-- 背景图片 -->
		  <image class="vip-content-bg" src="/static/svip3.png" mode="scaleToFill"></image>
		  <!-- 专属礼包横幅 -->
		  <view class="exclusive-banner">
		     <image class="exclusive-banner-image" src="/static/svip2.png" mode=""></image>
		  </view>
		 <view class="svip-list">
			<view class="svip-list-item">
				 <image class="svip-list-item-img" src="/static/svip5.png" mode=""></image>
				 <view class="svip-list-item-title">专属身份外显</view>
				  <view class="svip-list-item-text">SVIP专属身份标识</view>
			</view> 
			 
			 <view class="svip-list-item">
			 	<image class="svip-list-item-img" src="/static/svip6.png" mode=""></image>
			 	<view class="svip-list-item-title">专属年度卡密礼包

</view>
			 	 <view class="svip-list-item-text">礼包含360次搜题
<view>卡密，无惧扣分</view>
</view>
			 </view> 
			 <view class="svip-list-item">
			 	<image class="svip-list-item-img" src="/static/svip7.png" mode=""></image>
			 	<view class="svip-list-item-title">专属客服</view>
			 	 <view class="svip-list-item-text">专线客服
				 <view>在线协助</view>
				 </view>
			 </view> 
		 </view>
	 </view>
   
      

      
      <!-- 升级横幅 -->
      <view class="upgrade-banner">
		  <text class="upgrade-banner-text">立即升级 领取年度卡密礼包</text>
           <image class="upgrade-banner-img" src="/static/svip4.png" mode=""></image>
      </view>
      
      <!-- 开通按钮 -->
      <button class="activate-button" @tap="handleButtonClick">{{ buttonText }}</button>
    </view>
    
    <!-- 支付方式弹窗 -->
    <uni-popup ref="paymentPopup" type="bottom" :mask-click="true" :safe-area="false">
      <view class="payment-modal">
        <view class="modal-header">
          <text class="modal-title">选择支付方式</text>
        </view>

        <view class="payment-options">
          <view
            v-for="(method, index) in paymentMethods"
            :key="index"
            class="payment-item"
            :class="{ active: selectedPayment === index }"
            @tap="selectPayment(index)"
          >
            <view class="payment-left">
              <view class="payment-icon">
                <image class="payment-icon-img" :src="method.iconSrc" mode="scaleToFill"></image>
              </view>
              <text class="payment-name">{{ method.name }}</text>
            </view>
            <view class="radio-button" :class="{ active: selectedPayment === index }">
              					<image class="check-icon" v-if="selectedPayment === index" src="/static/tuoyuan1.png" mode=""></image>
                          <image v-else class="check-icon-moren" src="/static/tuoyuan.png" mode=""></image>
            </view>
          </view>
        </view>

        <view class="modal-footer">
          <view class="payment-info">
            <text class="payment-label">需支付:</text>
            <text class="payment-amount">{{ paymentAmountText }}</text>
          </view>
          <button class="pay-button" @tap="handlePayment">支付</button>
        </view>
      </view>
    </uni-popup>

    <!-- 登录弹窗组件 -->
    <LoginModal
      ref="loginModalRef"
      @close="onLoginModalClose"
      @skip="onLoginSkip"
      @login="onLoginSuccess"
    />
  </view>
  </NavBar>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { isLoggedIn, navigateToLogin, getToken, getCurrentUser, fetchUserInfo } from '../../utils/user.js'
import { isWeixinMiniProgram } from '../../utils/platform.js'
import { SVIP_API } from '../../config/api.js'
import { getSvipConfig } from '../../utils/config.js'
import LoginModal from '@/components/LoginModal/LoginModal.vue'

// 响应式数据
const selectedPayment = ref(0) // 默认选择第一个可用的支付方式
const paymentPopup = ref()
const loginModalRef = ref()
const isUserLoggedIn = ref(false)
const svipStatus = ref({
  is_active: false,
  can_claim: false,
  next_claim_time: ''
})
const publicConfig = ref({
  svip_config: {
    price: 1
  }
})

// 判断当前平台
const isWeixinMP = ref(isWeixinMiniProgram())

// 所有支付方式
const allPaymentMethods = [
  {
    name: '金豆',
    icon: '☁️',
    iconClass: 'gold-beans',
    iconSrc: '/static/svip9.png'
  },
  {
    name: '支付宝',
    icon: '支',
    iconClass: 'alipay',
    iconSrc: '/static/svip8.png'
  },
  {
    name: '微信',
    icon: '微',
    iconClass: 'wechat',
    iconSrc: '/static/svip10.png'
  }
]

// 计算可用的支付方式
const paymentMethods = computed(() => {
  const methods = []

  // 金豆始终排在第一个
  methods.push(allPaymentMethods[0]) // 金豆

  if (isWeixinMP.value) {
    // 微信小程序：显示微信支付，隐藏支付宝
    methods.push(allPaymentMethods[2]) // 微信
  } else {
    // 非微信小程序：显示支付宝支付，隐藏微信
    methods.push(allPaymentMethods[1]) // 支付宝
  }

  return methods
})

// 计算默认选中的支付方式索引
const getDefaultPaymentIndex = () => {
  // 默认选择第二个支付方式（非金豆的支付方式）
  // 如果只有金豆一种方式，则选择金豆
  return paymentMethods.value.length > 1 ? 1 : 0
}

// 计算属性 - 按钮文本
const buttonText = computed(() => {
  if (!isUserLoggedIn.value) {
    return '立即开通'
  }

  if (!svipStatus.value.is_active) {
    return '立即开通'
  }

  if (svipStatus.value.can_claim) {
    return '领取SVIP权益礼包'
  }

  // 格式化下一次可领取时间，只显示年月日
  if (svipStatus.value.next_claim_time) {
    const date = new Date(svipStatus.value.next_claim_time)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `下一次可领取时间：${year}-${month}-${day}`
  }

  return '立即开通'
})

// 计算属性 - 支付金额文本
const paymentAmountText = computed(() => {
  const selectedMethod = paymentMethods.value[selectedPayment.value]
  const svipPrice = publicConfig.value.svip_config?.price || 1

  // 打印 svip_config 字段
  console.log('publicConfig.value.svip_config:', publicConfig.value.svip_config)

  if (selectedMethod.name === '金豆') {
    // 金豆支付直接使用price字段
    return `${svipPrice}金豆`
  } else {
    // 微信和支付宝支付需要将price从分换算成元
    const priceInYuan = (svipPrice / 100).toFixed(2)
    return `${priceInYuan}元`
  }
})

// 按钮点击处理
const handleButtonClick = () => {
  if (!isUserLoggedIn.value) {
    // 未登录，显示登录弹窗或跳转登录页面
    if (isWeixinMiniProgram()) {
      showLoginModal()
    } else {
      navigateToLogin('/pages/vip/vip')
    }
    return
  }

  if (!svipStatus.value.is_active) {
    // 未开通SVIP，显示支付弹窗
    showPaymentModal()
    return
  }

  if (svipStatus.value.can_claim) {
    // 可以领取权益，调用领取API
    claimSvipReward()
    return
  }

  // 其他情况（显示下一次可领取时间），不做任何操作
  uni.showToast({
    title: '请等待下一次领取时间',
    icon: 'none',
    duration: 2000
  })
}

// 领取SVIP权益礼包
const claimSvipReward = async () => {
  try {
    uni.showLoading({
      title: '领取中...'
    })

    const token = getToken()
    if (!token) {
      throw new Error('未找到用户token，请重新登录')
    }

    const response = await uni.request({
      url: SVIP_API.CLAIM,
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      }
    })

    console.log('SVIP权益领取API响应:', response)

    if (response.statusCode === 200 && response.data.code === 200) {
      uni.hideLoading()

      uni.showToast({
        title: '领取成功',
        icon: 'success',
        duration: 2000
      })

      // 刷新用户信息
      try {
        await fetchUserInfo()
        console.log('用户信息刷新成功')
      } catch (error) {
        console.error('刷新用户信息失败:', error)
      }

      // 重新获取SVIP状态
      setTimeout(() => {
        fetchSvipStatus()
      }, 1000)

    } else {
      uni.hideLoading()
      const errorMessage = response.data?.data?.error_message || response.data?.error_message || response.data?.message || '领取失败'
      uni.showToast({
        title: errorMessage,
        icon: 'error',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('领取SVIP权益失败:', error)
    uni.hideLoading()

    const errorMessage = error.message || '领取失败，请重试'
    uni.showToast({
      title: errorMessage,
      icon: 'error',
      duration: 2000
    })
  }
}

// 获取SVIP配置
const fetchSvipConfig = async () => {
  try {
    const svipConfig = await getSvipConfig(true);
    publicConfig.value = {
      svip_config: svipConfig
    }
    console.log('SVIP配置更新:', publicConfig.value)
  } catch (error) {
    console.error('获取SVIP配置失败:', error)
    // 使用默认配置
    publicConfig.value = {
      svip_config: {
        price: 1,
        invite_beancoin: 1000,
        svip_solve_count: 360
      }
    }
  }
}

// 检查登录状态并更新页面状态
const checkLoginStatus = () => {
  const loginStatus = isLoggedIn()
  isUserLoggedIn.value = loginStatus

  if (loginStatus) {
    // 已登录，获取SVIP状态
    fetchSvipStatus()
  } else {
    // 未登录，重置SVIP状态
    svipStatus.value = {
      is_active: false,
      can_claim: false,
      next_claim_time: ''
    }
  }
}

// 获取SVIP状态
const fetchSvipStatus = async () => {
  try {
    const token = getToken()
    if (!token) {
      console.error('未找到用户token')
      return
    }

    const response = await uni.request({
      url: SVIP_API.STATUS,
      method: 'GET',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      }
    })

    console.log('SVIP状态API响应:', response)

    if (response.statusCode === 200 && response.data.code === 200) {
      const svipInfo = response.data.data.svip_info || {}
      svipStatus.value = {
        is_active: svipInfo.is_active || false,
        can_claim: svipInfo.can_claim || false,
        next_claim_time: svipInfo.next_claim_time || ''
      }
      console.log('SVIP状态更新:', svipStatus.value)
    } else {
      const errorMessage = response.data?.data?.error_message || response.data?.error_message || response.data?.message || '获取SVIP状态失败'
      console.error('获取SVIP状态失败:', errorMessage)
    }
  } catch (error) {
    console.error('获取SVIP状态失败:', error)
  }
}

// 登录弹窗相关方法
const showLoginModal = () => {
  loginModalRef.value?.open()
}

const onLoginModalClose = () => {
  console.log('登录弹窗关闭')
}

const onLoginSkip = () => {
  uni.showToast({
    title: '暂不登录',
    icon: 'none',
    duration: 2000
  })
}

const onLoginSuccess = () => {
  // 弹框处理了登录逻辑 这里只处理登录完成逻辑
  console.log('登录成功')
  // 重新检查登录状态和获取SVIP状态
  checkLoginStatus()
}

// 方法
const goBack = () => {
  uni.navigateBack()
}

const showPaymentModal = () => {
  // 设置默认选中的支付方式
  selectedPayment.value = getDefaultPaymentIndex()
  paymentPopup.value?.open()
}

const selectPayment = (index: number) => {
  selectedPayment.value = index
}

const handlePayment = async () => {
  const selectedPaymentData = paymentMethods.value[selectedPayment.value]
  console.log('支付信息:', selectedPaymentData)

  // 获取支付方式对应的数字
  let payMethod = 1 // 默认微信
  if (selectedPaymentData.name === '金豆') {
    payMethod = 3
  } else if (selectedPaymentData.name === '支付宝') {
    payMethod = 2
  } else if (selectedPaymentData.name === '微信') {
    payMethod = 1
  }

  // 如果是金豆支付，需要先判断用户金豆余额
  if (payMethod === 3) {
    const user = getCurrentUser()
    const userBeans = user?.bean || 0
    const svipPrice = publicConfig.value.svip_config?.price || 1

    if (userBeans < svipPrice) {
      uni.showToast({
        title: '金豆不足，无法支付',
        icon: 'none',
        duration: 2000
      })
      return
    }
  }

  try {
    uni.showLoading({
      title: '创建支付订单...'
    })

    // 调用SVIP支付接口
    await callSvipPayment(payMethod)

  } catch (error) {
    console.error('支付失败:', error)
    uni.hideLoading()

    const errorMessage = error.message || '支付失败，请重试'
    uni.showToast({
      title: errorMessage,
      icon: 'error',
      duration: 2000
    })
  }
}

// 调用SVIP支付接口
const callSvipPayment = async (payMethod) => {
  try {
    const token = getToken()
    if (!token) {
      throw new Error('未找到用户token，请重新登录')
    }

    const response = await uni.request({
      url: SVIP_API.OPEN_PAY,
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      data: {
        pay_type: payMethod
      }
    })

    console.log('SVIP支付接口响应:', response)

    if (response.statusCode === 200 && response.data.code === 200) {
      uni.hideLoading()

      // 根据支付方式处理不同的响应
      if (payMethod === 1) {
        // 微信支付需要调起支付
        const paymentData = response.data.data
        await callWechatPay(paymentData.pay_data)
      } else if (payMethod === 2) {
        // 支付宝支付需要调起支付
        const paymentParams = response.data.data
        await callAlipay(paymentParams)
      } else if (payMethod === 3) {
        // 金豆支付已经完成扣费和状态刷新，直接处理成功
        await handlePaymentSuccess()
      }
    } else {
      const errorMessage = response.data?.data?.error_message || response.data?.error_message || response.data?.message || '创建支付订单失败'
      throw new Error(errorMessage)
    }
  } catch (error) {
    console.error('SVIP支付接口调用失败:', error)
    throw error
  }
}

// 调起微信支付
const callWechatPay = async (payData) => {
  try {
    console.log('微信支付参数:', payData)

    // #ifdef MP-WEIXIN
    await wx.requestPayment({
      timeStamp: payData.timestamp,
      nonceStr: payData.noncestr,
      package: payData.package,
      signType: 'RSA',
      paySign: payData.sign
    })

    console.log('微信支付成功')
    await handlePaymentSuccess()
    // #endif

    // #ifndef MP-WEIXIN
    uni.showToast({
      title: '当前环境不支持微信支付',
      icon: 'error'
    })
    // #endif
  } catch (error) {
    if (error.errMsg === 'requestPayment:fail cancel') {
      uni.showToast({
        title: '支付已取消',
        icon: 'none'
      })
    } else {
      uni.showToast({
        title: '支付失败',
        icon: 'error'
      })
    }
    throw error
  }
}

// 调起支付宝支付
const callAlipay = async (paymentParams) => {
  try {
    console.log('支付宝支付参数:', paymentParams)

    // 检查是否有支付宝支付数据
    if (!paymentParams || !paymentParams.pay_data || !paymentParams.pay_data.order_string) {
      throw new Error('支付参数不完整')
    }

    // 使用uni.requestPayment调起支付宝支付
    await uni.requestPayment({
      provider: 'alipay',
      orderInfo: paymentParams.pay_data.order_string,
      success: (res) => {
        console.log('支付宝支付成功:', res)
      },
      fail: (err) => {
        console.error('支付宝支付失败:', err)
        throw err
      }
    })

    console.log('支付宝支付成功')
    await handlePaymentSuccess()

  } catch (error) {
    console.error('支付宝支付错误:', error)

    // 处理不同的错误情况
    if (error.errMsg) {
      if (error.errMsg.includes('cancel')) {
        uni.showToast({
          title: '支付已取消',
          icon: 'none'
        })
      } else if (error.errMsg.includes('fail')) {
        uni.showToast({
          title: '支付失败',
          icon: 'error'
        })
      } else {
        uni.showToast({
          title: error.errMsg || '支付失败',
          icon: 'error'
        })
      }
    } else {
      uni.showToast({
        title: error.message || '支付失败',
        icon: 'error'
      })
    }
    throw error
  }
}


// 支付成功后的处理
const handlePaymentSuccess = async () => {
  try {
    // 刷新用户信息
    await fetchUserInfo()
    console.log('用户信息刷新成功')
  } catch (error) {
    console.error('刷新用户信息失败:', error)
  }

  uni.showToast({
    title: '支付成功',
    icon: 'success'
  })

  // 关闭支付弹窗
  setTimeout(() => {
    paymentPopup.value?.close()
  }, 500)

  // 重新获取SVIP状态
  setTimeout(() => {
    fetchSvipStatus()
  }, 1000)
}

// 页面加载时初始化
onMounted(() => {
  console.log('VIP页面加载')
  fetchSvipConfig()
  checkLoginStatus()
  // showPaymentModal()
})
</script>

<style scoped>
.vip-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a0033 0%, #2d1b69 50%, #1a0033 100%);
  position: relative;
  overflow: hidden;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 10rpx;
  background: transparent;
  position: relative;
  z-index: 10;
}

.status-time {
  font-size: 34rpx;
  font-weight: 600;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-icon {
  font-size: 24rpx;
  color: white;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  background: transparent;
  position: relative;
  z-index: 10;
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  background: rgba(255, 255, 255, 0.1);
}

.back-icon {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
}

/* 主内容区域 */
.main-content {
  position: relative;
  z-index: 5;
  padding: 0 40rpx 40rpx;
}
.svip-list-item-img{
	width: 114rpx;
	height: 126rpx;
}
/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.check-icon {
 
  width: 32rpx;
  height: 32rpx;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16rpx;
  color: #FFFFFF;
  font-weight: bold;
  margin-right: 5rpx;
}
.check-icon-moren{
 width: 32rpx;
  height: 32rpx;
	  margin-right: 5rpx;
}

.big-six {
  position: absolute;
  top: 200rpx;
  right: -100rpx;
  font-size: 400rpx;
  font-weight: 900;
  color: rgba(156, 39, 176, 0.3);
  text-shadow: 0 0 50rpx rgba(156, 39, 176, 0.5);
  transform: rotate(-15deg);
}

.light-streaks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: lightMove 3s ease-in-out infinite;
}

@keyframes lightMove {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* 机器人角色 */
.robot-character {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 100rpx 0 60rpx;
  z-index: 3;
}

.robot-crown {
  position: absolute;
  top: -40rpx;
  z-index: 4;
}

.crown-icon {
  font-size: 40rpx;
  filter: drop-shadow(0 0 10rpx #FFD700);
}

.robot-head {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #2d1b69 0%, #1a0033 100%);
  border-radius: 60rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30rpx rgba(156, 39, 176, 0.5);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}
.vip-content{
	width: 690rpx;
	height: 448rpx;
	padding: 30rpx;
	box-sizing: border-box;
	position: relative;
}

.vip-content-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.robot-screen {
  width: 80rpx;
  height: 50rpx;
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8rpx;
  box-shadow: 0 0 15rpx rgba(0, 188, 212, 0.6);
}

.screen-bar {
  width: 8rpx;
  height: 30rpx;
  background: white;
  border-radius: 4rpx;
}

.screen-arrows {
  font-size: 16rpx;
  color: white;
  font-weight: bold;
}

.robot-body {
  width: 100rpx;
  height: 40rpx;
  background: linear-gradient(135deg, #2d1b69 0%, #1a0033 100%);
  border-radius: 20rpx;
  margin-top: -10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20rpx rgba(156, 39, 176, 0.4);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.body-x {
  font-size: 24rpx;
  color: #00bcd4;
  font-weight: bold;
  text-shadow: 0 0 10rpx rgba(0, 188, 212, 0.8);
}

.robot-arm {
  position: absolute;
  right: -20rpx;
  top: 20rpx;
  z-index: 2;
}

.arm-hand {
  font-size: 30rpx;
  animation: wave 2s ease-in-out infinite;
}
.exclusive-banner {
	position: relative;
	z-index: 2;
}

.exclusive-banner-image{
	width: 515rpx;
	height: 40rpx;
	margin: 0 auto;
}
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

/* SVIP标题区域 */
.svip-title-section {
  text-align: center;
  margin-bottom: 40rpx;
  z-index: 3;
  position: relative;
  margin-top: 160rpx;
}
.svip-title-section-image{
	width: 550rpx;
	height: 680rpx;
	margin: 0 0 20rpx;
}
.svip-text {
  font-size: 80rpx;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 30rpx rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 16rpx;
  background: linear-gradient(45deg, #fff, #e1bee7, #fff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svip-slogan {
  font-size: 28rpx;
  color: white;
  opacity: 0.9;
  font-weight: 500;
}

/* 专属礼包横幅 */
.exclusive-banner {
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text {
  font-size: 26rpx;
  color: white;
  font-weight: 500;
  line-height: 1.4;
}

.svip-list{
	display: flex;
	justify-content: space-around;
	position: relative;
	z-index: 2;
}
.svip-list-item{
	width: 32%;

	background-size: 100% 100%;
	height: 334rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.svip-list-item-title{
	font-size: 24rpx;
	color: #fff;
	margin: 20rpx 0;
	text-align: center;
}
.svip-list-item-text{
	font-size: 24rpx;
	color: #898989 ;
	text-align: center;
	padding: 0 5rpx;
	box-sizing: border-box;
}
.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: white;
  text-align: center;
  margin-bottom: 30rpx;
  display: block;
}

.feature-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.shield-icon {
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  box-shadow: 0 0 20rpx rgba(156, 39, 176, 0.4);
}

.icon-crown {
  position: absolute;
  top: -8rpx;
  font-size: 20rpx;
  filter: drop-shadow(0 0 5rpx #FFD700);
}

.icon-v {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
  text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
}

.gift-icon {
  background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
  box-shadow: 0 0 20rpx rgba(233, 30, 99, 0.4);
}

.gift-box {
  font-size: 32rpx;
  filter: drop-shadow(0 0 10rpx rgba(255, 255, 255, 0.5));
}

.service-icon {
  background: linear-gradient(135deg, #2196f3 0%, #9c27b0 100%);
  box-shadow: 0 0 20rpx rgba(33, 150, 243, 0.4);
}

.headset {
  font-size: 32rpx;
  filter: drop-shadow(0 0 10rpx rgba(255, 255, 255, 0.5));
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: white;
  display: block;
  margin-bottom: 8rpx;
}

.card-desc {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* 升级横幅 */
.upgrade-banner {
  border-radius: 16rpx;
  margin:30rpx auto 40rpx;
  height: 48rpx;
  position: relative;
  width: 560rpx;
}
.upgrade-banner-img{
	width: 560rpx;
	height: 22rpx;
	margin: 0 auto;
}
.upgrade-banner-text{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	line-height: 48rpx;
	color: #fff;
	width: 100%;
	font-size: 36rpx;
}
.diamond-icon {
  font-size: 24rpx;
  filter: drop-shadow(0 0 8rpx rgba(156, 39, 176, 0.8));
}

.upgrade-text {
  font-size: 26rpx;
  color: white;
  font-weight: 500;
}

/* 开通按钮 */
.activate-button {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #FAEFC5 0%, #EEB8BA 100%);
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 20rpx;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.4);
  transition: all 0.3s ease;
  z-index: 3;
  position: relative;
  color: #3A1701;
}

.activate-button:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.6);
}

/* 支付弹窗 */
.payment-modal {
  background: white;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 30rpx;
  max-height: 60vh;
}

.modal-header {
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  text-align: left;
}

.payment-options {
  margin-bottom: 30rpx;
}

.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #E5E5E5;
margin-bottom: 20rpx;
box-sizing: border-box;
}



.payment-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.payment-icon {
  width: 60rpx;
  height: 60rpx;

}
.payment-icon-img{
	width: 48rpx;
	height: 48rpx;
}
.payment-icon.gold-beans {
  width: 48rpx;
  height: 48rpx;
    background-image: url('/static/svip9.png');
	  background-size: 100% 100%;
}

.payment-icon.alipay {
 width: 48rpx;
 height: 48rpx;
  background-image: url('/static/svip10.png');
  background-size: 100% 100%;
}

.payment-icon.wechat {
 width: 48rpx;
 height: 48rpx;
  background-image: url('/static/svip8.png');
  background-size: 100% 100%;
}

.icon-text {
  font-size: 24rpx;
  color: white;
  font-weight: bold;
}

.payment-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.radio-button {
  width:32rpx;
  height: 32rpx;

}


.checkmark {
  font-size: 20rpx;
  color: white;
  font-weight: bold;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #F0F0F0;
  width: 100%;
  height: 92rpx;
  margin: 0 auto;
}

.payment-info {
    	width: 50%;
  display: flex;
  align-items: center;
  gap: 8rpx;
   background-color: #E0DCDC;
 height: 92rpx;
 border-radius: 30rpx 0 0 30rpx;
 padding-left: 20rpx;
 color: #8B8B8B;
}

.payment-label {
  font-size: 28rpx;
  color: #666;
}

.payment-amount {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.pay-button {
	height: 92rpx;
	width: 50%;
	background-color: #565FFD;
	border-radius: 0 30rpx 30rpx 0;
    color: #fff;
}



/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .feature-cards {
    gap: 16rpx;
  }
  
  .feature-card {
    padding: 16rpx;
  }
  
  .card-icon {
    width: 60rpx;
    height: 60rpx;
  }
  
  .card-title {
    font-size: 26rpx;
  }
  
  .card-desc {
    font-size: 20rpx;
  }
}

/* 安全区域适配 */
@supports (padding: max(0px)) {
  .vip-container {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}
</style>
